<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="tab(1)">显示第一个组件</button><button @click="tab(2)">显示第二个组件</button>
        <button @click="tab(3)">显示第三个组件</button>
        <!-- <com1 v-if="show"></com1>
        <com2 v-else></com2> -->
        <keep-alive>
            <!-- is属性的值是哪个组件的名字component就会显示为哪一个组件 -->
            <component :is="com"></component>
        </keep-alive>
        
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const com1 = {
            template: `<div>这是第一个组件</div>`,
            created() {
                console.log(1);
            },
            // 组件激活时触发的生命周期
            activated() {
                console.log('组件激活了');
            },
            // 组件失活时触发的生命周期
            deactivated() {
                console.log('组件失活了');
            },
        }


        const com2 = {
            template: `<div>这是第二个组件</div>`,
            created() {
                console.log(2);
            },
        }

        const com3 = {
            template: `<div>这是第三个组件</div>`,
            created() {
                console.log(3);
            },
        }

        new Vue({
            el: "#app",
            
            components: {
                com1: com1,
                com2,
                com3
            },

            data: {
                show: true,
                com: 'com1'
            },

            methods: {
                tab(num) {
                    
                    this.com = 'com' + num
                }
            },
        })
    </script>
</body>
</html>